import React, { useState } from 'react';
import { Typography, Space, Button } from 'antd';
import LifecycleDemo from '../components/Examples/LifecycleDemo';
import { LoadingExampleComponent } from '../components/Examples/withLoading';
import TodoReducer from '../components/Examples/TodoReducer';

const { Title } = Typography;

const Examples: React.FC = () => {
    const [showLifecycle, setShowLifecycle] = useState(true);
    const [loading, setLoading] = useState(false);

    const toggleLoading = () => {
        setLoading(true);
        setTimeout(() => setLoading(false), 2000);
    };

    return (
        <div>
            <Title level={2}>React 高级特性示例</Title>
            
            <Space direction="vertical" style={{ width: '100%' }}>
                {/* 生命周期示例 */}
                <div>
                    <Button 
                        onClick={() => setShowLifecycle(prev => !prev)}
                        style={{ marginBottom: 16 }}
                    >
                        {showLifecycle ? '卸载组件' : '挂载组件'}
                    </Button>
                    {showLifecycle && (
                        <LifecycleDemo title="类组件生命周期演示" />
                    )}
                </div>

                {/* 高阶组件示例 */}
                <div>
                    <Title level={4}>高阶组件示例</Title>
                    <Button onClick={toggleLoading} style={{ marginBottom: 16 }}>
                        切换加载状态
                    </Button>
                    <LoadingExampleComponent
                        loading={loading}
                        title="HOC示例"
                        content="这是一个使用高阶组件添加加载状态的示例"
                    />
                </div>

                {/* useReducer示例 */}
                <TodoReducer />
            </Space>
        </div>
    );
};

export default Examples; 